<!--
 * @Autor: 王琛
 * @Description: 登录页面
 * @Copyright: 智优科技版权所有
-->
<style lang="stylus" scoped>
#logIn {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: auto;
}

.logFrame {
  width: 400px;
  position: absolute;
  right: 5%;
  top: 25%;
  background: rgba(0, 0, 0, 0.6);
  border-radius 5px;
  padding: 15px;
  box-sizing: border-box;
  pointer-events: auto;

  & > p {
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
    margin: 35px 0px;
    text-align: center;
  }

  .verificationCode {
    width: 100%;
    height: 50px;
    display: grid;
    grid-template-rows:100%;
    grid-template-columns:repeat(2, calc(50% - 3px));
    gap: 0px 6px

    & > img {
      width: 100%;
    }
  }
}

</style>

<style lang="stylus">
#logIn {
  .el-form {
    width: 85%;
    margin: 0 auto;

    .el-form-item {
      margin-bottom: 30px;
    }

    .el-form-item__label {
      color: #fff;
    }

    .el-input__inner {
      border-color: transparent;
      border-bottom: 1px solid rgb(246, 187, 6);
      background-color: transparent !important;
      color: #fff;
      font-size: 14px;
    }

    .el-button {
      width: 100%;
      height: 32px;
      display: block;
      background-color: rgb(246, 187, 6);
      color: #000;
      border-color: transparent;
      font-weight: 400;
      font-size: 14px;
      margin: 15px auto 20px;
    }
  }


}
</style>

<template>
  <div id="logIn">
    <!--登录框-->
    <div class="logFrame">
      <!-- 欢迎语 -->
      <p>欢迎登录</p>
      <el-form ref="ruleForm" label-width="0px" :model="_data.loginFrom" :rules="signInRules" class="demo-ruleForm" label-position="left" :disabled="_data.loading">
        <div class="fromWarp">
          <!-- 账号 -->
          <el-form-item label="" prop="username">
            <el-input v-model="_data.loginFrom.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="" prop="password">
            <el-input v-model="_data.loginFrom.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <!-- 验证 -->
          <el-form-item label="" prop="captcha">
            <div class="verificationCode">
              <el-input class="verification" v-model="_data.loginFrom.captcha" size="mini" placeholder="请输入验证码" @blur.stop></el-input>
              <img v-if="_data.verificationCodeURL" :src="_data.verificationCodeURL" @click.stop.prevent="verificationCode"/>
            </div>
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item label="">
            <el-button type="primary" :loading="_data.loading" @click="register">登录</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>


<script setup lang="ts">
import {onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
// @ts-ignore 引入登录的API
import {login} from "api";
// @ts-ignore 引入获取uuid的方法
import {getUuid} from "src/assets/js/tool.js";
// 引入路由
const _router = useRouter();
// 路由信息
const _route = useRoute();
// 引入全局状态管理
const _state = useStore().state;
// 响应式变量
const _data = reactive({
  // 登录的表单
  loginFrom: {
    // 用户名
    username: '',
    // 密码
    password: '',
    // 验证码
    captcha: '',
    //
    grant_type: "password",
    // uuid
    uuid: getUuid(),
  },
  //登录按钮状态
  loading: false,
  // 验证码刷新
  verificationCodeNum: 0,
  // 验证码URL
  verificationCodeURL: ''
});
// 获取登录用的表单组件实例
const ruleForm = ref(null);
// 登录字段验证验证
const signInRules = {
  // 用户名
  username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
  // 密码
  password: [{required: true, message: '请输入密码', trigger: 'blur'}],
  // 验证码
  captcha: [{required: false, message: '请输入验证码', trigger: 'blur'}],
}
// 监听键盘按键时间
window.addEventListener("keydown", keyEnter, false);
// 页面初始化执行的函数
onMounted(() => {
  // 更新验证码地址
  verificationCode()
})
// 页面卸载前干点什么
onBeforeUnmount(() => {
  // 页面离开的时候解除监听
  window.removeEventListener("keydown", keyEnter, false);
})

/**
 * @author: 王琛
 * @description: 回车事件
 * @Date: 2021-11-10 09:49:56
 * @param {*}
 * @return {*}
 */
function keyEnter(e) {
  if (e.keyCode == 13) register();
}

async function registered() {
  const over = await login.createUser(_data.loginFrom)
}

/**
 * @author: 王琛
 * @description: 登陆事件
 * @Date: 2021-11-10 09:49:56
 * @param {*}
 * @return {*}
 */
async function register() {
  _router.push({
    path: "/home"
  })
  return;
  // 验证表单是否已经填写完比
  const verification = await ruleForm.value.validate();

  // 开启按钮等待
  _data.loading = true;
  // 创建表单对象
  // const fromObj = new FormData();
  // for (let key of Object.keys(data.loginFrom)) {
  //   fromObj.append(key, data.loginFrom[key]);
  // }
  // 开始登录
  const loginInfo = await login.startLogin(data.loginFrom);
  console.log('%c王琛-153153', 'color:#fff;background:#ee6f57;padding:3px;border-radius:2px', loginInfo, _data.loginFrom);
  // 判断是否登录成功
  if (loginInfo?.code == 0) {
    // 设置token
    sessionStorage.setItem("daxing_Airport_token", loginInfo.access_token);
    _state.token = loginInfo.access_token;
    // 给window设置一个值;
    window["daxingAirport.token"] = loginInfo.access_token;
    // 设置用户登录信息
    sessionStorage.setItem("daxing_Airport_userLoginInfo", JSON.stringify(_data.loginFrom));
    _state.userLoginInfo = loginInfo.access_token;
    // 登录成功后跳转到登录页面
    _router.push({
      path: "/home"
    })
  }
  _data.loading = false;
  // 更新验证码
  // verificationCode();
}

/**
 * @author: 王琛
 * @description: 获取验证码的URL
 * @Date: 2021-11-12 19:50:56
 * @param {*}
 * @return {*}
 */
function verificationCode() {
  // 首先获取uuid
  const uuid = getUuid();
  // 更新参数中的uuid
  _data.loginFrom.uuid = uuid;
  _data.verificationCodeURL = `${import.meta.env.VITE_MODE_API_PROTOCOL}${import.meta.env.VITE_MODE_API_IP}${import.meta.env.VITE_MODE_API_POOT}/auth/captcha?uuid=${uuid}`;
}
</script>

